<style type="text/css">
  #dialog_reslov {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 20000;
  }

  #dialog_reslov .dialog_box {
    position: relative;
    background: rgba(255, 255, 255);
    top: 10%;
    width: 50%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    height:auto;
    align-items: center;
  }

  #dialog_reslov .dialog_line {
    margin-top: .5em;
    margin-bottom: .5em;
    margin-left: 2em;
    margin-right: 2em;
  }

  #dialog_reslov .dialog_box>h4,
  #dialog_reslov .dialog_box>p,
  #dialog_reslov .dialog_box>div {
    flex-basis: 100%;
  }

  #dialog_reslov .dialog_box>img {
    margin-right: 1em;
    flex-basis: 32px;
  }

  body.dialog-reslov-active {
    overflow: hidden;
    height: 100vh;
  }

  body.dialog-reslov-active #dialog_reslov {
    display: block;
  }
</style>
<script type="text/javascript">
  function close_reslov_dialog() {
    document.body.classList.remove('dialog-reslov-active')
    document.documentElement.style.overflowY = 'scroll'
  }

  function reslov_container() {
    let s = document.getElementById('cmd-line-status')
    if (!s) return
    let cmd_line = document.getElementById("dialog_reslov_text").value;
    if (cmd_line == null || cmd_line == "") {
      return
    }
    cmd_line = cmd_line.replace(/(^\s*)/g,"")
    if (!cmd_line.match(/^docker\s+(run|create)/)) {
      s.innerHTML = "<font color='red'><%:Command line Error%></font>"
      return
    }
    let reg_space = /\s+/g
    let reg_muti_line= /\\\s*\n/g
    //   reg_rem =/(?<!\\)`#.+(?<!\\)`/g  // the command has `# `
    let reg_rem =/`#.+`/g// the command has `# `
    cmd_line = cmd_line.replace(/^docker\s+(run|create)/,"DOCKERCLI").replace(reg_rem, " ").replace(reg_muti_line, " ").replace(reg_space, " ")
    console.log(cmd_line)
    window.location.href = '<%=luci.dispatcher.build_url("admin/docker/newcontainer")%>/' + encodeURI(cmd_line)
  }

  function clear_text(){
    let s = document.getElementById('cmd-line-status')
    s.innerHTML = ""
  }

  function show_reslov_dialog() {
    document.getElementById('dialog_reslov') || document.body.insertAdjacentHTML("beforeend", '<div id="dialog_reslov"><div class="dialog_box"><div class="dialog_line"></div><div class="dialog_line"><span><%:Plese input <docker create/run> command line:%></span><br><span id="cmd-line-status"></span></div><div class="dialog_line"><textarea class="cbi-input-textarea" id="dialog_reslov_text" style="width: 100%; height:100%;" rows="15" onkeyup="clear_text()"></textarea></div><div class="dialog_line" style="text-align: right;"><input type="button" class="cbi-button cbi-button-apply" type="submit" value="<%:Submit%>" onclick="reslov_container()" /> <input type="button" class="cbi-button cbi-button-reset" type="reset" value="<%:Cancel%>" onclick="close_reslov_dialog()" /></div><div class="dialog_line"></div></div></div>')
    document.body.classList.add('dialog-reslov-active')
    let s = document.getElementById('cmd-line-status')
    s.innerHTML = ""
    document.documentElement.style.overflowY = 'hidden'
  }
</script>
<%+cbi/valueheader%>
<input type="button" class="cbi-button cbi-button-apply" value="<%:Command line%>" onclick="show_reslov_dialog()" />

<%+cbi/valuefooter%>
